<!-- 新闻页面主模板 -->
<template>
  <!-- 新闻页面主容器 -->
  <div class="news-page">
    <!-- 新闻分类导航区域 -->
    <nav class="news-nav">
      <!-- 导航容器 -->
      <div class="nav-container">
        <!-- 分类导航项循环 -->
        <div 
          v-for="category in newsCategories" 
          :key="category.key"
          class="nav-item"
          :class="{ active: activeCategory === category.key }"
          @click="switchCategory(category.key)"
        >
          {{ category.name }}
        </div>
      </div>
    </nav>

    <!-- 新闻内容主区域 -->
    <div class="news-content">
      <!-- 内容容器 -->
      <div class="content-container">
        <!-- 新闻文章列表 -->
        <div class="news-list">
          <!-- 新闻文章项循环 -->
          <div 
            v-for="article in currentArticles" 
            :key="article.id"
            class="news-item"
            @click="goToDetail(article)"
          >
            <!-- 新闻封面图片区域 -->
            <div class="news-image">
              <img :src="article.image" :alt="article.title" />
            </div>
            
            <!-- 新闻详细信息区域 -->
            <div class="news-info">
              <!-- 新闻元数据信息 -->
              <div class="news-meta">
                <!-- 新闻分类标签 -->
                <span class="news-category">{{ getCategoryName(article.category) }}</span>
                <!-- 新闻发布日期 -->
                <span class="news-date">{{ article.date }}</span>
              </div>
              
              <!-- 新闻标题 -->
              <h3 class="news-title">{{ article.title }}</h3>
              
              <!-- 新闻内容摘要 -->
              <p class="news-summary">{{ article.summary }}</p>
              
              <!-- 新闻标签列表 -->
              <div class="news-tags">
                <!-- 标签项循环 -->
                <span 
                  v-for="tag in article.tags" 
                  :key="tag"  
                  class="tag"
                >
                  {{ tag }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页导航组件 -->
        <div class="pagination" v-if="totalPages > 1">
          <!-- 上一页按钮（当前页为第1页时禁用） -->
          <button 
            class="page-btn"
            :disabled="currentPage <= 1" 
            @click="changePage(currentPage - 1)"
          >
            上一页
          </button>
          
          <!-- 分页信息显示 -->
          <span class="page-info">
            第 {{ currentPage }} 页，共 {{ totalPages }} 页
          </span>
          
          <!-- 下一页按钮（当前页为最后一页时禁用） -->
          <button 
            class="page-btn"
            :disabled="currentPage >= totalPages"
            @click="changePage(currentPage + 1)"
          >
            下一页
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 新闻页面脚本逻辑 -->
<script>
export default {
  // 组件名称
  name: 'NewsPage',
  
  // 组件数据定义
  data() {
    return {
      // 当前激活的新闻分类
      activeCategory: 'latest',
      // 当前页码
      currentPage: 1,
      // 每页显示的新闻数量
      pageSize: 6,
      // 新闻分类配置数组
      newsCategories: [
        { key: 'latest', name: '最新' },      // 最新分类
        { key: 'updates', name: '动态' },     // 动态分类
        { key: 'announcements', name: '公告' }, // 公告分类
        { key: 'events', name: '活动' },      // 活动分类
        { key: 'news', name: '资讯' }         // 资讯分类
      ],
      // 新闻数据对象，按分类存储
      newsData: {
        latest: [
          {
            id: 13,
            title: '新女武神「月下初拥·丽塔」即将登场',
            summary: '全新S级女武神「月下初拥·丽塔」即将在下个版本与舰长们见面！作为冰属性辅助型女武神，她将为队伍带来强大的支援能力。',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/157811/92333adce61e1a9e75591e2741dcfd97_7957877470594159892.png',
            date: '2025/02/05',
            category: 'updates',
            tags: ['新角色', '丽塔', '冰属性']
          },
          {
            id: 14,
            title: '「星穹铁道」联动活动预告',
            summary: '《崩坏3》与《崩坏：星穹铁道》联动活动即将开启！跨越星海的冒险等待着舰长们，更有限定角色和装备等你获取！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/156251/ea55b240730debec811239cbb393a7bb_2296978660569028145.png',
            date: '2025/02/03',
            category: 'events',
            tags: ['联动', '星穹铁道', '限定']
          },
          {
            id: 1,
            title: '淬星激斗｜参与活动获取水晶、根源接缘等奖励！',
            summary: '一人选战，三人协攻，在深邃的星光下战斗不休！「淬星激斗」活动开启，舰长通关单人作战区域，可获得淬环星砾，用于提升星之环等级，强化对应星之环效果。',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/157811/92333adce61e1a9e75591e2741dcfd97_7957877470594159892.png',
            date: '2025/01/31',
            category: 'events',
            tags: ['活动', '奖励', '水晶']
          },
          {
            id: 2,
            title: '《崩坏3》同人作品作品制作指引｜V3.0',
            summary: '《崩坏3》第三期同人指引上线，为了更好的规范同人创作的内容制作与合规要求，我们制作了下述指引。',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/156251/ea55b240730debec811239cbb393a7bb_2296978660569028145.png',
            date: '2024/01/10',
            category: 'announcements',
            tags: ['同人', '指引', '创作']
          },
          {
            id: 3,
            title: '群升补给｜群天东流·璀璨',
            summary: '全新W级装备群天东流·璀璨登场！「群天东流·璀璨」专属补给开启中！舰长「群天东流·璀璨」去获取吧！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/155185/0f94a55230acd105296b52e8037c2150_346690974827127744.png',
            date: '2022/09/02',
            category: 'updates',
            tags: ['补给', '装备', '璀璨']
          },
          {
            id: 4,
            title: '群升武器｜十相秘藏武之所见',
            summary: '群升武器「十相秘藏」与「武之所见」登场！全新武器强化系统等你体验！！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/127351/a3734f77846f906a99dc0aa739ab6ae9_1085305199320833304.png',
            date: '2022/09/02',
            category: 'updates',
            tags: ['武器', '强化', '系统']
          }
        ],
        updates: [
          {
            id: 15,
            title: '全新武器系统「神之键·第零额定功率」上线',
            summary: '全新武器系统正式上线！神之键系列武器迎来全面升级，第零额定功率解锁，为舰长们带来前所未有的战斗体验！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/155185/0f94a55230acd105296b52e8037c2150_346690974827127744.png',
            date: '2025/02/04',
            category: 'updates',
            tags: ['武器系统', '神之键', '升级']
          },
          {
            id: 5,
            title: 'V7.3版本「幻海梦蝶」正式上线',
            summary: '全新版本「幻海梦蝶」现已上线！新女武神「渡鸦·幻海」登场，全新主线章节开启，更多精彩内容等你体验！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/157811/92333adce61e1a9e75591e2741dcfd97_7957877470594159892.png',
            date: '2025/01/30',
            category: 'updates',
            tags: ['版本更新', '新角色', '主线']
          },
          {
            id: 6,
            title: '新女武神「渡鸦·幻海」技能详解',
            summary: '「渡鸦·幻海」作为全新的雷属性女武神，拥有独特的幻海机制和强大的输出能力，让我们一起了解她的技能特点。',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/156251/ea55b240730debec811239cbb393a7bb_2296978660569028145.png',
            date: '2025/01/28',
            category: 'updates',
            tags: ['新角色', '技能', '雷属性']
          }
        ],
        announcements: [
          {
            id: 7,
            title: '春节假期客服服务时间调整公告',
            summary: '亲爱的舰长们，春节假期期间（2月9日-2月17日），客服服务时间将有所调整，具体安排如下...',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/155185/0f94a55230acd105296b52e8037c2150_346690974827127744.png',
            date: '2025/02/01',
            category: 'announcements',
            tags: ['客服', '春节', '时间调整']
          },
          {
            id: 8,
            title: '游戏维护公告 - 2025年1月版本更新',
            summary: '为了给舰长们带来更好的游戏体验，我们将于2025年1月30日进行版本更新维护，维护时间预计4小时。',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/127351/a3734f77846f906a99dc0aa739ab6ae9_1085305199320833304.png',
            date: '2025/01/29',
            category: 'announcements',
            tags: ['维护', '更新', '公告']
          }
        ],
        events: [
          {
            id: 16,
            title: '「永恒乐土」深层序列挑战赛',
            summary: '全新挑战赛「永恒乐土·深层序列」开启！挑战更高难度的永恒乐土关卡，获得稀有材料和专属称号！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/127351/a3734f77846f906a99dc0aa739ab6ae9_1085305199320833304.png',
            date: '2025/02/06',
            category: 'events',
            tags: ['挑战赛', '永恒乐土', '高难度']
          },
          {
            id: 9,
            title: '新春庆典活动 - 龙年大吉',
            summary: '新春佳节即将到来，「龙年大吉」庆典活动现已开启！参与活动可获得丰厚奖励，包括水晶、材料、限定装扮等。',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/157811/92333adce61e1a9e75591e2741dcfd97_7957877470594159892.png',
            date: '2025/02/01',
            category: 'events',
            tags: ['新春', '庆典', '限定奖励']
          },
          {
            id: 10,
            title: '情人节特别活动 - 甜蜜时光',
            summary: '情人节即将到来，「甜蜜时光」特别活动开启！与你喜爱的女武神一起度过浪漫时光，获得专属奖励。',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/156251/ea55b240730debec811239cbb393a7bb_2296978660569028145.png',
            date: '2025/02/10',
            category: 'events',
            tags: ['情人节', '浪漫', '特别活动']
          }
        ],
        news: [
          {
            id: 17,
            title: '《崩坏3》获得2024年度最佳移动游戏奖',
            summary: '在刚刚结束的2024年度游戏大奖评选中，《崩坏3》凭借其出色的剧情表现和创新玩法，荣获"年度最佳移动游戏"大奖！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/157811/92333adce61e1a9e75591e2741dcfd97_7957877470594159892.png',
            date: '2025/02/02',
            category: 'news',
            tags: ['获奖', '年度大奖', '荣誉']
          },
          {
            id: 11,
            title: '《崩坏3》动画短片「永恒乐土」制作花絮',
            summary: '《崩坏3》最新动画短片「永恒乐土」制作花絮公开！让我们一起走进制作团队，了解这部精彩动画的诞生过程。',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/155185/0f94a55230acd105296b52e8037c2150_346690974827127744.png',
            date: '2025/01/25',
            category: 'news',
            tags: ['动画', '制作花絮', '永恒乐土']
          },
          {
            id: 12,
            title: '《崩坏3》全球玩家突破1.5亿',
            summary: '感谢全球舰长们的支持！《崩坏3》全球注册玩家数量已突破1.5亿，让我们一起继续这段精彩的冒险旅程！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/127351/a3734f77846f906a99dc0aa739ab6ae9_1085305199320833304.png',
            date: '2025/01/20',
            category: 'news',
            tags: ['里程碑', '玩家数量', '感谢']
          }
        ]
      }
    }
  }, 
  
  // 计算属性
  computed: {
    /**
     * 获取当前页面显示的文章列表
     * 根据当前分类和分页参数计算显示的文章
     */
    currentArticles() {
      const articles = this.newsData[this.activeCategory] || [] // 获取当前分类的文章数组
      const start = (this.currentPage - 1) * this.pageSize // 计算起始索引
      const end = start + this.pageSize // 计算结束索引
      return articles.slice(start, end) // 返回当前页的文章切片
    },
  
    /**
     * 计算总页数
     * 根据当前分类的文章总数和每页显示数量计算
     */
    totalPages() {  
      const articles = this.newsData[this.activeCategory] || [] // 获取当前分类的文章数组
      return Math.ceil(articles.length / this.pageSize) // 向上取整计算总页数
    }
  },
  
  // 组件方法
  methods: {
    /**
     * 切换新闻分类
     * @param {string} category - 要切换到的分类key
     */
    switchCategory(category) {
      this.activeCategory = category // 更新当前选中的分类
      this.currentPage = 1 // 重置页码为第一页
    },
    
    /**
     * 根据分类key获取分类名称
     * @param {string} categoryKey - 分类的key值
     * @returns {string} 分类的显示名称
     */
    getCategoryName(categoryKey) {
      const category = this.newsCategories.find(cat => cat.key === categoryKey) // 查找匹配的分类对象
      return category ? category.name : categoryKey // 返回分类名称或原key
    },
    
    /**
     * 跳转到新闻详情页面
     * @param {Object} article - 新闻文章对象
     */
    goToDetail(article) {
      this.$emit('show-detail', article) // 触发父组件的显示详情事件
    },
    
    /**
     * 切换页码
     * @param {number} page - 目标页码
     */
    changePage(page) {
      this.currentPage = page // 更新当前页码
    }
  }
}

</script>
<!-- 新闻页面样式 -->
<style scoped>
/* 新闻页面主容器 */
.news-page {
  min-height: 100vh; /* 最小高度：100视口高度 */
  background: rgba(5, 5, 5, 0.7); /* 背景色：半透明深色 */
}

/* 新闻分类导航样式 */
.news-nav {
  background: transparent; /* 背景：透明 */
  backdrop-filter: blur(10px); /* 背景模糊效果：10px */
  border-bottom: 1px solid rgba(241, 8, 8, 0.1); /* 底部边框：半透明红色 */
  padding: 20px 0; /* 内边距：上下20px */
}

/* 导航容器样式 */
.nav-container {
  max-width: 1200px; /* 最大宽度：1200px */
  margin: 0 auto; /* 外边距：水平居中 */
  display: flex; /* 布局：弹性盒子 */
  justify-content: center; /* 主轴对齐：居中 */
  gap: 40px; /* 项目间距：40px */
  padding: 0 20px; /* 内边距：左右20px */
}

/* 导航项样式 */
.nav-item {
  padding: 12px 24px; /* 内边距：上下12px 左右24px */
  color: rgba(255, 255, 255, 0.7); /* 文字颜色：半透明白色 */
  font-size: 16px; /* 字体大小：16px */
  font-weight: 500; /* 字体粗细：中等 */
  cursor: pointer; /* 鼠标样式：指针 */
  border-radius: 25px; /* 圆角：25px */
  transition: all 0.3s ease; /* 过渡效果：所有属性 0.3秒 */
  border: 2px solid transparent; /* 边框：2px 透明 */
}

/* 导航项悬停状态 */
.nav-item:hover {
  color: #fff; /* 文字颜色：白色 */
  background: rgba(255, 255, 255, 0.1); /* 背景色：半透明白色 */
  border-color: rgba(255, 255, 255, 0.3); /* 边框颜色：半透明白色 */
}

/* 导航项激活状态 */
.nav-item.active {
  color: #fff; /* 文字颜色：白色 */
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4); /* 背景：渐变色 */
  border-color: transparent; /* 边框颜色：透明 */
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3); /* 阴影效果 */
}

/* 新闻内容区域样式 */
.news-content {
  padding: 40px 0; /* 内边距：上下40px */
}

/* 内容容器样式 */
.content-container {
  max-width: 1200px; /* 最大宽度：1200px */
  margin: 0 auto; /* 外边距：水平居中 */
  padding: 0 20px; /* 内边距：左右20px */
}

/* 新闻列表网格样式 */
.news-list {
  display: grid; /* 布局：网格 */
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* 网格列：自适应，最小350px */
  gap: 30px; /* 网格间距：30px */
  margin-bottom: 40px; /* 底部外边距：40px */
}

/* 新闻项样式 */
.news-item {
  background: rgba(255, 255, 255, 0.05); /* 背景色：半透明白色 */
  border-radius: 15px; /* 圆角：15px */
  overflow: hidden; /* 溢出：隐藏 */
  cursor: pointer; /* 鼠标样式：指针 */
  transition: all 0.3s ease; /* 过渡效果：所有属性 0.3秒 */
  border: 1px solid rgba(255, 255, 255, 0.1); /* 边框：半透明白色 */
}

/* 新闻项悬停状态 */
.news-item:hover {
  transform: translateY(-5px); /* 变换：向上移动5px */
  background: rgba(255, 255, 255, 0.1); /* 背景色：半透明白色 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* 阴影效果 */
  border-color: rgba(255, 255, 255, 0.2); /* 边框颜色：半透明白色 */
}

/* 新闻图片容器样式 */
.news-image {
  width: 100%; /* 宽度：100% */
  height: 200px; /* 高度：200px */
  overflow: hidden; /* 溢出：隐藏 */
}

/* 新闻图片样式 */
.news-image img {
  width: 100%; /* 宽度：100% */
  height: 100%; /* 高度：100% */
  object-fit: cover; /* 对象适应：覆盖 */
  transition: transform 0.3s ease; /* 过渡效果：变换 0.3秒 */
}

/* 新闻项悬停时图片缩放效果 */
.news-item:hover .news-image img {
  transform: scale(1.05); /* 变换：放大1.05倍 */
}

/* 新闻信息区域样式 */
.news-info {
  padding: 20px; /* 内边距：20px */
}

/* 新闻元数据样式 */
.news-meta {
  display: flex; /* 布局：弹性盒子 */
  justify-content: space-between; /* 主轴对齐：两端对齐 */
  align-items: center; /* 交叉轴对齐：居中 */
  margin-bottom: 12px; /* 底部外边距：12px */
}

/* 新闻分类标签样式 */
.news-category {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4); /* 背景：渐变色 */
  color: #fff; /* 文字颜色：白色 */
  padding: 4px 12px; /* 内边距：上下4px 左右12px */
  border-radius: 12px; /* 圆角：12px */
  font-size: 12px; /* 字体大小：12px */
  font-weight: 500; /* 字体粗细：中等 */
}

/* 新闻日期样式 */
.news-date {
  color: rgba(255, 255, 255, 0.6); /* 文字颜色：半透明白色 */
  font-size: 14px; /* 字体大小：14px */
}

/* 新闻标题样式 */
.news-title {
  color: #fff; /* 文字颜色：白色 */
  font-size: 18px; /* 字体大小：18px */
  font-weight: 600; /* 字体粗细：粗体 */
  margin-bottom: 12px; /* 底部外边距：12px */
  line-height: 1.4; /* 行高：1.4倍 */
  display: -webkit-box; /* 显示：webkit盒子 */
  -webkit-line-clamp: 2; /* webkit行数限制：2行 */
  -webkit-box-orient: vertical; /* webkit盒子方向：垂直 */
  overflow: hidden; /* 溢出：隐藏 */
}

/* 新闻摘要样式 */
.news-summary {
  color: rgba(255, 255, 255, 0.8); /* 文字颜色：半透明白色 */
  font-size: 14px; /* 字体大小：14px */
  line-height: 1.6; /* 行高：1.6倍 */
  margin-bottom: 15px; /* 底部外边距：15px */
  display: -webkit-box; /* 显示：webkit盒子 */
  -webkit-line-clamp: 3; /* webkit行数限制：3行 */
  -webkit-box-orient: vertical; /* webkit盒子方向：垂直 */
  overflow: hidden; /* 溢出：隐藏 */
}

/* 新闻标签容器样式 */
.news-tags {
  display: flex; /* 布局：弹性盒子 */
  flex-wrap: wrap; /* 换行：允许换行 */
  gap: 8px; /* 项目间距：8px */
}

/* 标签样式 */
.tag {
  background: rgba(255, 255, 255, 0.1); /* 背景色：半透明白色 */
  color: rgba(255, 255, 255, 0.8); /* 文字颜色：半透明白色 */
  padding: 4px 8px; /* 内边距：上下4px 左右8px */
  border-radius: 8px; /* 圆角：8px */
  font-size: 12px; /* 字体大小：12px */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框：半透明白色 */
}

/* 分页导航样式 */
.pagination {
  display: flex; /* 布局：弹性盒子 */
  justify-content: center; /* 主轴对齐：居中 */
  align-items: center; /* 交叉轴对齐：居中 */
  gap: 20px; /* 项目间距：20px */
  margin-top: 40px; /* 顶部外边距：40px */
}

/* 分页按钮样式 */
.page-btn {
  padding: 10px 20px; /* 内边距：上下10px 左右20px */
  background: rgba(255, 255, 255, 0.1); /* 背景色：半透明白色 */
  color: #fff; /* 文字颜色：白色 */
  border: 1px solid rgba(255, 255, 255, 0.3); /* 边框：半透明白色 */
  border-radius: 20px; /* 圆角：20px */
  cursor: pointer; /* 鼠标样式：指针 */
  transition: all 0.3s ease; /* 过渡效果：所有属性 0.3秒 */
}

/* 分页按钮悬停状态（非禁用） */
.page-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2); /* 背景色：半透明白色 */
  border-color: rgba(255, 255, 255, 0.5); /* 边框颜色：半透明白色 */
}

/* 分页按钮禁用状态 */
.page-btn:disabled {
  opacity: 0.5; /* 透明度：50% */
  cursor: not-allowed; /* 鼠标样式：禁止 */
}

/* 分页信息样式 */
.page-info {
  color: rgba(255, 255, 255, 0.8); /* 文字颜色：半透明白色 */
  font-size: 14px; /* 字体大小：14px */
}

/* 响应式设计 - 移动端适配 */
@media (max-width: 768px) {
  /* 导航容器移动端样式 */
  .nav-container {
    flex-wrap: wrap; /* 换行：允许换行 */
    gap: 15px; /* 项目间距：15px */
  }
  
  /* 导航项移动端样式 */
  .nav-item {
    padding: 8px 16px; /* 内边距：上下8px 左右16px */
    font-size: 14px; /* 字体大小：14px */
  }
  
  /* 新闻列表移动端样式 */
  .news-list {
    grid-template-columns: 1fr; /* 网格列：单列 */
    gap: 20px; /* 网格间距：20px */
  }
  
  /* 内容容器移动端样式 */
  .content-container {
    padding: 0 15px; /* 内边距：左右15px */
  }
}
</style>